<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<html>
<head>
<%
String clientId=(String)request.getAttribute("clientId");
String clientName=(String)request.getAttribute("clientName");
%>
<title>Client - <%=clientName %></title>
<%@include file="/WEB-INF/css.jsp" %>
<%@include file="/WEB-INF/javascript.jsp" %>
<style>
</style>
<script>
$(document).ready(function(){
	$('#InvoiceFiltersContainer').buttonset().change(function(){
		$('#InvoicesContainer').empty();
		// Collect all filters, get clients by filters.
		var filters={
	    	"clientId":'<%=clientId%>'
		};
		$('#InvoiceFiltersContainer :checked').each(function(){
			filters[$(this).attr('name')]=true;
		});
		$.ajax({
			url:"/AjaxGetMyClientInvoices",
			type:"GET",
			data:filters,
			dataType:"json",
			success:function(data,status,xhr){
				var invoices=data.data;
				var invoicesContainer=$('#InvoicesContainer');
				if(invoices!=null&&invoices.length>0){
					for(var i=0;i<invoices.length;i++){
						invoicesContainer.append('<div class="InvoiceCard">'+
						'<div class="InvoiceCardInfo">'+
						'<div style="float:left;width:20%;">Invoice Number: <a href="/GetInvoice?invoiceId='+invoices[i].invoiceId+'&clientId=<%=clientId%>&clientName=<%=clientName%>">'+(invoices[i].InvoiceNumber==undefined?"":invoices[i].InvoiceNumber)+'</a></div>'+
						'<div style="float:left;width:15%;">Items: '+(invoices[i].Items==undefined?"0":invoices[i].Items)+'</div>'+
						'<div style="float:left;width:20%;">Total Amount: $'+(invoices[i].TotalAmount!=undefined?invoices[i].TotalAmount:"0")+'</div>'+
						'<div style="float:left;width:30%;">Issued Date: '+(invoices[i].IssuedDate==undefined?"":invoices[i].IssuedDate)+'</div>'+
						(invoices[i].FullyPaidDate!=undefined?'<div style="float:left;width:10%;color:green;">'+invoices[i].FullyPaidDate+'</div>':'<div style="float:left;width:10%;color:red;">Unpaid</div>')+
						'</div></div>');
					}
				}else{
					invoicesContainer.append('<div class="InvoiceCard">No Invoices Found</div>');
				}
			},
			error:function(xhr,status,error){
				alert('Error:'+error);
			}
		});
	});
	$('#ClientDetailsButton').button().click(function(){
		window.location.href='/GetClient?clientId=<%=clientId %>';
	});
	$('#CreateInvoiceConfirmationDialog').dialog({
		resizable:false,
		autoOpen:false,
		height:240,
		width:800,
		modal:true,
		buttons:{
			"Create":function(){
				window.location.href='/SaveInvoice?clientId=<%=clientId %>&clientName=<%=clientName%>';
			},
			Cancel:function(){
				$(this).dialog("close");
			}
		}
	});
	$('#CreateInvoiceButton').button().click(function(){
		$('#CreateInvoiceConfirmationDialog').dialog("open");
	});
	$('#ClientServicesButton').button().click(function(){
		window.location.href='/services.jsp?clientId=<%=clientId %>&clientName=<%=clientName%>';
	});
	$.ajax({
		url:"/AjaxGetMyClientInvoices",
		type:"GET",
		data:{
			"clientId":'<%=clientId%>',
			FilterPaid:true,
			FilterUnpaid:true
		},
		dataType:"json",
		success:function(data,status,xhr){
			var invoices=data.data;
			var invoicesContainer=$('#InvoicesContainer');
			if(invoices!=null&&invoices.length>0){
				for(var i=0;i<invoices.length;i++){
					invoicesContainer.append('<div class="InvoiceCard">'+
					'<div class="InvoiceCardInfo">'+
					'<div style="float:left;width:20%;">Invoice Number: <a href="/GetInvoice?invoiceId='+invoices[i].invoiceId+'&clientId=<%=clientId%>&clientName=<%=clientName%>">'+(invoices[i].InvoiceNumber==undefined?"":invoices[i].InvoiceNumber)+'</a></div>'+
					'<div style="float:left;width:15%;">Items: '+(invoices[i].Items==undefined?"0":invoices[i].Items)+'</div>'+
					'<div style="float:left;width:20%;">Total Amount: $'+(invoices[i].TotalAmount!=undefined?invoices[i].TotalAmount:"0")+'</div>'+
					'<div style="float:left;width:30%;">Issued Date: '+(invoices[i].IssuedDate==undefined?"":invoices[i].IssuedDate)+'</div>'+
					(invoices[i].FullyPaidDate!=undefined?'<div style="float:left;width:10%;color:green;">'+invoices[i].FullyPaidDate+'</div>':'<div style="float:left;width:10%;color:red;">Unpaid</div>')+
					'</div></div>');
				}
			}else{
				invoicesContainer.append('<div class="InvoiceCard">No Invoices Found</div>');
			}
		},
		error:function(xhr,status,error){
			alert('Error:'+error);
		}
	});
});
</script>
</head>
<body>
<%@include file="/WEB-INF/clientnavigation.jsp" %>
<div class="ListContainer">
<div class="ActionsContainer" style="margin:10px;">
<button id="ClientDetailsButton">Back To Client Details</button>
<button id="ClientServicesButton">Services</button>
<button id="CreateInvoiceButton">Create Invoice</button><div id="CreateInvoiceConfirmationDialog" title="Are you sure?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This item will be created with invoice number, are you sure?</p>
</div>
<input id="clientId" name="clientId" type="hidden" value="<%=clientId%>"/>
<input id="clientName" name="clientName" type="hidden" value="<%=clientName%>"/>
</div>
<div id="InvoiceFiltersContainer" style="margin-bottom:10px;">
Filters:
<input id="FilterPaid" name="FilterPaid" type="checkbox" checked="checked"/><label for="FilterPaid">Paid</label>
<input id="FilterUnpaid" name="FilterUnpaid" type="checkbox" checked="checked"/><label for="FilterUnpaid">Unpaid</label>
</div>
<div id="InvoicesContainer">
</div>
</div>
</body>
</html>